<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="1.5" style="padding-top:25px;">
        <span>堂食订单查询：</span>
      </el-col>
      <el-col :span="3" style="padding-top:20px;">
        <div>
          <!-- <span>请输入餐桌号：</span> -->
          <el-input size="medium" v-model="ininput" placeholder="请输入餐桌号"></el-input>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="padding-top:18px;">
          <el-button type="primary" icon="el-icon-search" @click="getSetId()">堂食订单</el-button>
        </div>
      </el-col>
      <el-col :span="1.5" style="padding-top:25px;">
        <span>外卖订单查询：</span>
      </el-col>
      <el-col :span="3" style="padding-top:20px;">
        <div>
          <!-- <span>请输入时间：</span> -->
          <el-input size="medium" v-model="outinput" placeholder="请输入时间"></el-input>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="padding-top:18px;">
          <el-button type="primary" icon="el-icon-search" @click="getOutTime()">外卖订单</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="eat-in-table" v-show="InisShow" >
      <el-table
        :data="currentInData"
        border 
        :header-cell-style="this.$store.state.headerCssObj"
        :cell-style="this.$store.state.cellCssObj"
      >
        <el-table-column prop="orderType.label" label="订单类型"></el-table-column>
        <el-table-column prop="createTime" label="下单时间"></el-table-column>
        <!-- <el-table-column prop="orderType" label="人数"></el-table-column> -->
        <el-table-column prop="seatsId" label="餐台号码"></el-table-column>
        <el-table-column prop="name" label="菜品名称"></el-table-column>
        <el-table-column prop="createBy" label="下单服务员"></el-table-column>
        <el-table-column prop="totalPrice" label="总价"></el-table-column>
        <el-table-column prop="mainState" label="支付状态"></el-table-column>
      </el-table>
      <!-- <el-button type="primary" @click="inQuit()">确定</el-button> -->
    </div>
    <div class="take-out-table" v-show="OutisShow" style="padding-top:20px">
      <el-table
        :data="currentOutData"
        border
        :header-cell-style="this.$store.state.headerCssObj"
        :cell-style="this.$store.state.cellCssObj"
      >
        <!-- <el-table-column prop="" label="编号"></el-table-column> -->
        <el-table-column prop="orderType.label" label="订单类型"></el-table-column>
        <el-table-column prop="createTime" label="下单时间"></el-table-column>
        <!-- <el-table-column prop="orderType" label="人数"></el-table-column> -->
        <el-table-column prop="name" label="客户名称"></el-table-column>
        <el-table-column prop="address" label="外卖地址"></el-table-column>
        <el-table-column prop="telephone" label="联系电话"></el-table-column>
        <el-table-column prop="dishesMainId" label="菜品名称"></el-table-column>
        <el-table-column prop="totalPrice" label="总价"></el-table-column>
        <el-table-column prop="mainState" label="订单状态"></el-table-column>
      </el-table>
      <div style="text-align: center;">
        <paging @click="getOutTime()" :obj="pagingData"></paging>
        <!-- <el-button type="primary" @click="outQuit()">退出</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  name: "selectOrderPage",
  data() {
    return {
      InisShow: false,
      OutisShow: false,
      ininput: "",
      outinput: "",
      num: 1
    };
  },

  methods: {
    ...mapActions(["postInData", "postOutData", "userOperation"]),
    getSetId() {
      if (this.ininput === "") {
        alert("请输入桌号");
      } else {
        let obj = {
          seatsId: this.ininput,
          orderType: 0
        };
        this.InisShow = true;
        this.OutisShow=false
        this.postInData(obj);
        let operation = {
          userName: this.$store.state.user.userName,
          operationDate: this.$store.state.nowTime.time,
          operationMessage: "堂食查询"
        };
        // this.getSetId()
        this.userOperation(operation);
      }
    },
    // inQuit() {
    //   // this.$router.push('/front/selectOrder')
    //   this.InisShow = !this.InisShow;
    //   this.ininput = "";
    // },
    getOutTime() {
      if (this.outinput === "") {
        alert("请输入时间"); 
      } else {
        let obj = {
          createTime: this.outinput,
          currentPage: this.num,
          pageSize: 5,
          orderType: 1
        };
        this.OutisShow = true;
        this.InisShow=false
        this.postOutData(obj);
        console.log("我执行了");
        console.log(obj.createTime);
        let operation = {
          userName: this.$store.state.user.userName,
          operationDate: this.$store.state.nowTime.time,
          operationMessage: "外卖查询"
        };
        // this.getSetId()
        this.userOperation(operation);
      }
    },
    // outQuit() {
    //   //   this.$router.push('selectOrder')
    //   this.OutisShow = !this.OutisShow;
    //   this.outinput = "";
    // }
  },
  created() {
    // this.postInData();
    // this.postOutData();
  },

  computed: {
    ...mapState({
      // InData: function(state) {
      //   // console.log(this.$store.state.indentStore.postInsData.data)
      //   return state.indentStore.postInsData;
      // },
      // OutData: function(state) {
      //   return state.indentStore.postOutsData;
      //   // console.log(123)
      // }
    }),
    ...mapGetters([
      'getPostInsData','getPostOutsData'
    ]),
    pagingData() {
      var that = this;
      let data = {
        pageSize: 5, //一页展示几条数据
        pagerCount: 5, //超过多少页打点省略
        currentChange(num) {
          that.currentPage = num; //改变当前页
          console.log(num);
          let obj = {
            createTime: that.outinput,
            currentPage: num,
            pageSize: 5,
            orderType: 1
          };
          that.postOutData(obj);
        },
        pageCount: 2 //一共有几条数据
      };
      return data;
    },
    currentInData() {
      console.log(this.getPostInsData);
      return this.getPostInsData;//将ordertype更改之后的数组
    },
    currentOutData() {
      console.log(this.getPostOutsData);
      return this.getPostOutsData;
    }
  }
};
</script>

<style lang="less" scoped>
</style>